<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<meta charset="utf-8"/>
<title>美站库 炫美网站大全</title>
<link rel="stylesheet" type="text/css" href="images/index.css" />
</head>
<body>
<div id="header">
	<div id="top" class="auto">
		<div class="logo">
			<h1>
				<img src="images/logo.png" />
				<span>多想在平庸的生活拥抱你</span>
			</h1>
		</div>
		<div class="serach">
		<form>
			<input id="searchText" class="text" type="text" />
			<input id="searchButton" class="submit" type="button" value="搜索" />
		</form>
		</div>
	</div>
	<div id="nav" class="auto">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">提交站点</a></li>
		</ul>
	</div>
	<div id="runplay" class="auto">
		<div class="left">
			<a href="#"><img src="images/123.jpg" height=200px/></a>
		</div>
		<div class="right">
			<dl>
				<dt id="runplayH">精美网站尽在美站库</dt>
				<dd class="txt" id="rate">本网站收集互联网上各种新潮电影.....</dd>
				<dd class="btn">
					<a href="#">查看更多</a>
				</dd>
			</dl>
		</div>
	</div>
</div>
<div id="main">
	<div id="main1">
		<div id="wrap">
			<div id="leftBody">
				<div class="leftDiv1">
					<h2>音乐鉴赏</h2>
					<p id="raCount">若不是你<a href="#" target="_blank">突然闯进我生活</a>我怎会把死守的寂寞放任了！</p>
				</div>
				<div class="leftDiv2">
					<h2>院线</h2>
					<ul>
						<li>
							<a href="https://movie.douban.com/subject/27622447/"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530599636.webp" height=120px/></a>
							<p>小偷家族</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/26752088/"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2519070834.webp" height=120px/></a>
							<p>我不是药神</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/27063403/"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2526385810.webp" height=120px/></a>
							<p>悠哉日常大王剧场版：假期活动</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/26147417/"><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2538826177.webp" height=120px/></a>
							<p>神奇动物：格林德沃之罪</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/30331149/"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544313786.webp" height=120px/></a>
							<p>白蛇：缘起</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/27082461/"><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2520170117.webp" height=120px/></a>
							<p>我的三次元女友</p>
						</li>
					</ul>
				</div>
				<div class="leftDiv3">
					<a href="#">查看更多</a>
				</div>
			</div>
			<div id="rightBody">
				<div class="rightDiv1">
					<h2>歌曲欣赏</h2>
					<ul>
						<li>
							<h3><a href="#" target="_black">你知道我在等你吗</a></h3>
							<p>我知道我们即将分开</p>
						</li>
						<li>
							<h3><a href="#" target="_black">你如果真的在乎我</a></h3>
							<p>但是不管我们之间距离有多远</p>
						</li>
						<li>
							<h3><a href="#" target="_black">又怎会让无尽的夜陪我度过</a></h3>
							<p>我还是会喜欢你的</p>
						</li>
					</ul>
				</div>
				<div class="rightDiv2">
					<dl class="dl1">
						<dt><a href="#">只要保养好</a></dt>
						<dd>你的男友在高考</dd>
					</dl>
					<dl class="dl2">
						<dt><a href="#">WIFI密码</a></dt>
						<dd>?????</dd>
					</dl>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="footer">
	<p class="p1">
		<a href="#" target="_blank">首页</a>
		<a href="#" target="_blank">美站</a>
		<a href="#" target="_blank">酷文</a>
		<a class="last" href="#" target="_blank">联系我们</a>
	</p>
	<p>
		Copyright (c) 2019 <a href="http://www.sifangku.com" target="_blank" >私房库</a>
	</p>
</div>
</body>
<script>
$(document).ready(function(){


	var ajaxData = [];
	var titles=[];
		
		$.ajax({url:"data/douban300.json",
		
			success:function(result){
			ajaxData=result;
			$("#rsCount").html("ajax访问成功");
			//alert(result.subjects[2].title);
			
			//alert(result.subjects.length);
			var i=0;
			for(i=0;i<ajaxData.subjects.length;i++)
			{
				titles.push(ajaxData.subjects[i].title);
			}
	
	}});	
			
	$( "#searchText" ).autocomplete({
      source: titles
    });

	$("#searchButton").click(function(){
		var usrIp=$("#searchText").val();
		$("#runplayH").html("亲爱的你刚输入: "+usrIp);
		alert(usrIp);
			
			
		//反查用户选择的电影名称，查评分rate，查影片封面cover
			
			var rate;
			var cover;
			for (i=0;i<ajaxData.subjects.length;i++)
				{
					if(ajaxData.subjects[i].title==usrIp)
					{
						rate=ajaxData.subjects[i].rate;
						cover=ajaxData.subjects[i].cover;
						$("#rate").html("电影评分为: "+rate);
						$("#titleOne").html(ajaxData.subjects[i].title+"电影评分为: "+rate);
						$("#imgOne").attr('src', cover);
			
			return;
				}
			}
			
			
			
	 });
 });
</script>
</html>